<template>
  <div class="faq">
    <Head @showMenu="showMn = true" class="header" />
    <Menu :showMenu="showMn" @closeMenu="showMn = false" />
    <div class="support-title">Frequently Asked Questions</div>
    <div class="support-title-sub">
      If you have any questions to which you didn’t find the answer for, ask our
      helpful community on Discord or send us a support ticket. We’re here to
      help!
    </div>

    <div class="support-content">
      <div
        class="support-item"
        :class="'color-' + (index % 5)"
        v-for="(item, index) in data"
        :key="index"
      >
        <div class="back-drop" :class="'color-' + (index % 5)"></div>
        <div class="support-head">
          <div class="support-head-num">{{ item.index }}</div>
          <div style="padding-right: 5px">
            {{ item.title }}
          </div>
          <div class="down-icon rotate-180" @click="item.active = !item.active">
            <div class="u-icon u-icon--right">
              <span class="icon iconfont arrow">&#xe6dc;</span>
            </div>
          </div>
        </div>
        <!-- <div
          
          
          class="u-transition u-fade-down-enter-to u-fade-down-enter-active"
          style="
            transition-duration: 300ms;
            transition-timing-function: ease-out;
          "
          ><div  class="support-text">
            <div  class="support-text-content">
              {{item.content}}
            </div>
          </div></div
        > -->
        <transition
          name="slide"
          enter-active-class="slideInDown"
          leave-active-class="slideOutUp"
        >
          <div
            class="support-text"
            v-show="item.active"
            style="animation-duration: 300ms"
          >
            <div 
            class="support-text-content">
              {{ item.content }}
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import Head from "@/components/head/header.vue";
import Menu from "@/components/menu";

export default {
  name: "faq",
  components: {
    Head,
    Menu,
  },
  computed: {},
  mounted() {
    this.active = this.$route.query.type;
  },
  data() {
    return {
      active: 0,
      showMn: false,
      titles: ["ALL", "CONDUCT", "COMPLETED"],
      contacts: ["whatsapp.webp", "telegram.webp", "skype.webp", "ins.webp"],
      data: [
        {
          active: false,
          index: 1,
          title: "What is Fcgbox?",
          content: `Fcgbox is an exciting and fast-paced website where you can unbox insane streetwear prizes at an unbelievably low cost. Our site catalogues online mystery boxes of multiple types. Each mystery box has a set probability of containing branded merchandise from exclusive brands such as Supreme and Nike.Every time you open a new mystery box, a random spinner will determine which item you get. After you unbox your item, it’s added to your account inventory! These items are real, and you can request for them to be sent to your house any time.`,
        },
        {
          active: false,
          index: 2,
          title: "How do I add credit to my account?",
          content: `Through Fcgbox’s payment partners, you can add credit using virtually any payment method. We use ZEN Pay to process debit & credit card transactions - if you have a Visa or Mastercard, you can play Fcgbox! We also accept most major cryptocurrencies such as Bitcoin and Litecoin. Head over to theTop-Uppage, and make your first payment.`,
        },
        {
          active: false,
          index: 3,
          title: "Can I choose my own sneaker- and clothing size?",
          content: `Yes, at Fcgbox you will be able to choose between all sizes available on the market. After you unbox an item and want to have it shipped to your home, you will be able to select your size. Some articles may be big or small in size, and we therefore strongly recommend looking up information regarding sizing.`,
        },
        {
          active: false,
          index: 4,
          title: "How do I view the products I have unboxed?",
          content: `Once you unbox a product, it’s automatically added to yourAccount Inventory(accessible via the “Inventory” tab on the website). Here, you can view all of the products you currently own. You can search for items by name, arrange them by price, sell them, or have them shipped to your home.`,
        },
        {
          active: false,
          index: 5,
          title: "How do I ship items to my home?",
          content: `Click on your profile picture, and click "place order". TheOrder Pageallows you to input your address, where you can receive all of the products stored in your inventory. After this, Fcgbox will begin the shipping process, and your items will be at your door in no time!`,
        },
        {
          active: false,
          index: 6,
          title: "Do I get rewarded for telling my friends about Fcgbox?",
          content: `Definitely. Fcgbox has a competitiveAffiliate Programwhich allows you to earn money if you’ve got a reach in the fashion community, or even just a few friends you’d like to share the website with. Send your referral link to your friends, and for each purchase they make, you get a commission. Click on your profile and navigate to the Affiliate section to learn more.`,
        },
        {
          active: false,
          index: 7,
          title: "How do I open a mystery box?",
          content: `First, ensure that you have money in your account. Your account balance should be higher than the cost of the box you’re looking to open. After that, click on the box price, and you’ll be led to the unboxing window. Finally, click the “Unbox” button to open the box.`,
        },
        {
          active: false,
          index: 8,
          title: "How many mystery boxes can I open at once?",
          content: `You can open up to 3 boxes at once. They will all open at the same time, so if you want to open multiple boxes of the same kind, this can save you a lot of time. All of the products you unbox are added collectively to your inventory after the unboxing.`,
        },
        {
          active: false,
          index: 9,
          title: "How do I see the product-information for a specific item?",
          content: `Once you’re on the unboxing page for a particular box, scroll down to the bottom of the page. Here, you can see how many items are in that box as well as what they are. Hover your mouse cursor over the items to view the probability of receiving them, and click on the item to view its full description. This includes shipping information, item variants, and more.`,
        },
        {
          active: false,
          index: 10,
          title: "Do I need to pay for the item I unbox?",
          content: `If you have unboxed an item, there are no further payments needed. We will ship the product to your home for free. No hidden fees.`,
        },
        {
          active: false,
          index: 11,
          title: "Can I change my items if I want something else?",
          content: `Of course you can. After you unbox a mystery box and receive your product, you can choose to sell it instantly. The value of the item will be returned to your on-site balance, which you can use to unbox new boxes until you get something you prefer. You can sell items immediately after you unbox them, or later on from your inventory page.`,
        },
        {
          active: false,
          index: 12,
          title: "What is the shipping process on Fcgbox?",
          content: `We currently ship worldwide 🌎

We take great care in ensuring that the process of unboxing a product and having it arrive at your door is seamless. Once you request shipping for a product and after it's shipped out, you’ll receive a tracking number which you can use to see exactly where your product is in our courier’s network.

Shipping notifications are sent to your email. Make sure to check your email regularly.`,
        },
        {
          active: false,
          index: 13,
          title: "How do I track my deliveries?",
          content: `Shipping updates are sent to your account email. You will be updated for every step in the shipping process.`,
        },
        {
          active: false,
          index: 14,
          title: "What is your refund/return policy?",
          content: `Here at Fcgbox, we take great care in ensuring that all of our players are satisfied with their prizes. If any prize you receive is found to be damaged during delivery, let us know within one day and we’ll take care of it for you with a full refund or replacement after a return.`,
        },
        {
          active: false,
          index: 15,
          title: "Are clothes from this website authentic?",
          content: `All clothes are 100% guaranteed to be authentic. In fact, each item of clothing comes with a Verified Authentic badge fromStockXthe world’s most premier streetwear distribution brand. Items are verified on both StockX’s end and Lootie’s end, going through a strict and rigorous authentication process with various steps. This includes professional material verification and stitching checks, so that every prize delivered is authentic - no exceptions.`,
        },
        {
          active: false,
          index: 16,
          title: "How do I get in touch with the team?",
          content: `How do I get in touch with the team?

The best way to contact us is via email fcgbox2022@gmail.com For business:fcgbox2022@gmail.com`,
        },
      ],
    };
  },
  methods: {
    goToBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.faq {
    margin-top: 95px;
  height: 100%;
  width: 100%;
  color: var(--text-color);
   background: var(--main-bc-color);
  .header {
    // position: relative;
  }

  .support-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-align: center;
    margin-bottom: 12px;
    margin-top: 15px;
  }
  .support-title-sub {
    padding: 10px;
    font-size: 16px;
    line-height: 1.19;
    letter-spacing: 0.21px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px;
    color: #5b6873;
    max-width: 600px;
  }
  .support-content {
       background: var(--main-bc-color);
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
    border-radius: 8px;
    margin: 30px auto;
    padding: 10px;

    .support-item {
      border-radius: 4px;
      margin-bottom: 10px;
      border-left-style: solid;
      border-left-width: 2px;
      position: relative;
      overflow: hidden;
    }
    .back-drop {
      width: 75px;
      -webkit-filter: blur(20px);
      filter: blur(20px);
      position: absolute;
      height: 100%;
      left: 0;
      top: 0;
      opacity: 0.3;
      background-color: currentColor;
    }
    .support-head {
      width: 100%;
      height: 72px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 0 12px;
      padding-right: 0;
      box-sizing: border-box;
      cursor: pointer;
      font-weight: 700;
      .support-head-num {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        border-radius: 4px;
        margin-right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 8;
        background-color: var(--nav-bc);
      }
    }
    .down-icon {
      transition: 0.3s;
      margin-left: auto;
      transform: rotate(-90deg);
      .arrow {
        color: var(--text-color);
      }
    }
    .color-0 {
      color: #4fc1e3;
    }
    .color-1 {
      color: #1abe66;
    }
    .color-2 {
      color: #f34747;
    }
    .color-3 {
      color: #9d63d2;
    }
    .color-4 {
      color: #fcd834;
    }
    .rotate-0 {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
  }
}
</style>